<template>
	<view class="commodity">
		<goods-list v-bind:goods='goods' @editClick="editGoods" @sellClick="sellGoods"></goods-list>

		<view class="isOver" v-if="flag">------我是有底线的------</view>

		<view class="container">
			<!-- <button @click="showDialog">显示弹框</button> -->
			<CustomDialog :show="show" :item="item" @update:show="updateShow">
				<view>这是一个自定义弹框</view>
			</CustomDialog>
		</view>
	</view>
</template>

<script>
	import ajax from '@/api/api.js'
	import url from '@/api/url.js'
	import goods from '@/components/goods-list/goods-list.vue'
	import CustomDialog from '@/components/CustomDialog/CustomDialog.vue'
	export default {
		components: {
			"goods-list": goods,
			'CustomDialog': CustomDialog
		},
		data() {
			return {
				goods: [],
				page: 1,
				total: 0,
				flag: false,
				show: false, //控制显示弹框
				item: {},

			}
		},
		methods: {
			// showDialog() {
			// 	this.show = true;
			// },
			//取消弹框调用
			updateShow(val) {
				console.log('updateShow', val)
				this.show = val;
			},

			//上架下架按钮
			sellGoods(index, item) {
				console.log('上下架', index, item)
				this.show = true
				this.item = item

			},

			//编辑商品跳转
			editGoods(index, item) {
				console.log(index, item)
				this.$routerX.push('/pages/commodity/EditGoodsDetail/EditGoodsDetail', {
					"id": item.id,
					"goods_name": item.goods_name,
					"brand_id": item.brand_id,
					"goods_cate": item.goods_cate,
					"image": item.image,
					"market_price": item.market_price,
					"shop_price": item.shop_price,
					"sale_price": item.sale_price,
					"goods_spec": item.goods_spec,
					"goods_unit": item.goods_unit,
					"goods_input": item.goods_unit,
					"updated_at": item.updated_at,
					"status": item.status,
					"goods_cate_name": item.goods_cate_name,
					"goods_unit_name": item.goods_unit_name,
					"status_name": item.status_name,
					"inputType": item.inputType
				})
			},
			//获取商品列表
			getGoodsData() {


				this.$londing()
				ajax(url.goodsList, {
					data: {
						page: this.page,
					}
				}).then(res => {
					console.log(res)

					this.goods = res.data.data
					// this.goods = [...this.goods, ...res.data.data]
					this.total = res.data.data.length
				}).catch(err => {
					console.log(err)
				})
			}

		},
		onLoad() {
			this.getGoodsData()

			//获取上下架监听并刷新表格
			let that = this
			this.$eventBus.$on('editData', function(id) {
				console.log(id)
				// this.goods = []
				uni.startPullDownRefresh()
			})
			this.$eventBus.$on('addData', function(id) {
				console.log("添加数据回调监听", id)
				uni.startPullDownRefresh()
			})
		},
		onNavigationBarButtonTap(event) {
			// console.log("导航右侧添加按钮", event)

			console.log("添加")
			this.$routerX.push('/pages/commodity/AddGoodsDetail/AddGoodsDetail')

		},


		//监听用户下拉动作
		onPullDownRefresh() {
			this.flag = false

			this.page = 1
			this.total = 0
			this.goods = []

			setTimeout(() => {
				this.getGoodsData(() => {
					// //停止刷新
					// uni.stopPullDownRefresh()
				})
			}, 1000)
			console.log('停止刷新')
			//停止刷新
			uni.stopPullDownRefresh()
		},

		//监听触底
		onReachBottom() {
			//如果返回的数据小于0 就代表没有数据了
			if (this.goods.length < this.page * 50) return this.flag = true
			// this.page = this.page + 1
			// if (this.page * 50 >= this.total) return this.flag = true
			this.page++
			console.log("页数增加", this.page)
			this.getGoodsData()

		}

	}
</script>

<style lang="scss">
	.commodity {
		.container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}

		.isOver {
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 28rpx;
		}
	}
</style>